import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    Modal,
    TouchableHighlight,
    DatePickerIOS,
    Platform,
    Animated
} from 'react-native';
import Style from './Style';
import Moment from 'moment';
import Button from './Button'

class DatePickerPopView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            animatedHeight: new Animated.Value(0),
            modalVisible: false
        }
        this.setModalVisible = this.setModalVisible.bind(this);
    }

    setModalVisible(visible) {
        const {height} = this.props;

        // slide animation
        if (visible) {
            // this.setState({modalVisible: visible});
            return Animated.timing(
                this.state.animatedHeight,
                {
                    toValue: height,
                    duration: 300
                }
            ).start();
        } else {
            return Animated.timing(
                this.state.animatedHeight,
                {
                    toValue: 0,
                    duration: 300
                }
            ).start(() => {
                // this.setState({modalVisible: visible});
            });
        }
    }

    onPressDate() {this.setModalVisible(true);}

    onDateChange() {}

    onPressMask() {
       this.setModalVisible(false);
    }

    render() {

      return (  <TouchableHighlight
            style={[Style.dateTouch]}
            underlayColor={'transparent'}
            onPress={ () => {this.setModalVisible(true);}}
        >
            <View style={[Style.dateTouchBody]}>
                <View>
                    {/*{this.getTitleElement()}*/}
                    <Text style={[Style.placeholderText]}>
                        "woeoeoeoeoeeo"
                    </Text>
                </View>


                    <View
                        style={{flex: 1}}
                    >
                        <TouchableHighlight
                            style={Style.datePickerMask}
                            activeOpacity={1}
                            underlayColor={'#46cf98'}
                            onPress={this.onPressMask}
                        >
                            <TouchableHighlight
                                underlayColor={'#46cf98'}
                                style={{flex: 1}}
                            >
                                <Animated.View
                                    style={[Style.datePickerCon, {height: this.state.animatedHeight}]}
                                >
                                    <View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}>
                                        <DatePickerIOS
                                            date={new Date()}
                                            mode={this.props.mode}
                                            // minimumDate={minDate && this.getDate(minDate)}
                                            // maximumDate={maxDate && this.getDate(maxDate)}
                                            onDateChange={this.onDateChange}
                                            // minuteInterval={minuteInterval}
                                            // timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
                                            style={[Style.datePicker]}
                                        />
                                    </View>
                                    <TouchableHighlight
                                        underlayColor={'transparent'}
                                        onPress={this.onPressMask()}
                                        style={[Style.btnText, Style.btnCancel]}
                                    >
                                        <Text
                                            style={[Style.btnTextText, Style.btnTextCancel]}
                                        >
                                            "cancel"
                                        </Text>
                                    </TouchableHighlight>
                                    <TouchableHighlight
                                        underlayColor={'transparent'}
                                        onPress={this.onPressMask()}
                                        style={[Style.btnText, Style.btnConfirm]}
                                    >
                                        <Text style={[Style.btnTextText]}>"confirm"</Text>
                                    </TouchableHighlight>
                                </Animated.View>
                            </TouchableHighlight>

                        </TouchableHighlight>
                    </View>
            </View>
        </TouchableHighlight>
      );

        // return (<View style={{flex: 1, backgroundColor:'#46cf98'}}>
        //
        //     <Button title="pickMyTime" onPress={() => this.onPressDate()} style={{
        //         width: 75,
        //         height: 30,
        //         color: 'black',
        //         textAlign: 'center'
        //     }}></Button>
        //
        //     <TouchableHighlight
        //         style={Style.datePickerMask}
        //         activeOpacity={1}
        //         underlayColor={'#46cf98'}
        //         onPress={this.onPressMask}
        //     >
        //         <TouchableHighlight
        //             underlayColor={'#46cf98'}
        //             style={{flex: 1}}
        //         >
        //     <Animated.View style={[Style.datePickerCon, {height: this.state.animatedHeight}]}
        //     >
        //         <View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}
        //         >
        //             <DatePickerIOS
        //                 date={ new Date()}
        //                 mode={ this.props.mode }
        //                 onDateChange={this.onDateChange}
        //                 style={[Style.datePicker]}
        //             />
        //         </View>
        //
        //     </Animated.View>
        //     </TouchableHighlight>
        //     </TouchableHighlight>
        // </View>
        // );
    }
}

DatePickerPopView.propTypes = {

    mode: React.PropTypes.oneOf(['date', 'datetime', 'time']),
    height: React.PropTypes.number
}

export default DatePickerPopView;

